import React, { Component } from 'react'

import Header from '../common/Header'
import { connect } from 'react-redux';
import { add_address_action, edit_address_action, delete_address_action } from '../../store/store';
import { Toast,Modal } from 'antd-mobile'

class Edit extends Component {
    constructor() {
        super();
        this.state = {
            id: 0,//地址编号
            name: '',//联系人
            phone: '',//电话
            address: ''//地址
        }
    }
    componentDidMount() {
        /* 获取需要编辑的地址对象 */
        var item = this.props.history.location.state;
        this.setState({
            name: item.name,
            phone: item.phone,
            address: item.address,
            id: item.id
        })
        
    }
    render() {
        
        
        return (
            <div className="add-page edit-page">
                {/* Header组件 */}
                <Header title="修改地址" back={<span onClick={() => { this.props.history.go(-1); }}>&lt;</span>}></Header>


                {/* 表单 */}
                <div className="cell">
                    <div>联系人</div>
                    <div><input type="text" placeholder="姓名" value={this.state.name} onChange={(e) => { this.setState({ name: e.target.value }) }} /></div>
                </div>
                <div className="cell">
                    <div>电话</div>
                    <div><input type="text" placeholder="电话" value={this.state.phone} onChange={(e) => { this.setState({ phone: e.target.value }) }} /></div>
                </div>
                <div className="cell">
                    <div>地址</div>
                    <div><input type="text" placeholder="地址" value={this.state.address} onChange={(e) => { this.setState({ address: e.target.value }) }} /></div>
                </div>

                {/* 保存 按钮 */}
                <div className="btn-box">
                    <div className="btn" onClick={() => {
                        Modal.alert("消息",
                            "你确定要删除吗?",
                            [
                                { text: '取消', onPress: () => { } },
                                {
                                    text: '确定', onPress: () => {
                                        this.props.delete_address(this.state.id);
                                        Toast.success("删除地址成功!", 1, null, false);
                                        setTimeout(() => {
                                            this.props.history.push('/addresslist');
                                        }, 1000)
                                    }
                                }
                            ]);
                        //this.props.delete_address(this.state.id);
                    }} >删除</div>
                    <div className="btn" onClick={() => {
                        if (this.state.name && this.state.phone && this.state.address) {
                            this.props.edit_address(this.state);
                            Toast.success("修改地址成功!", 1, null, false);
                            setTimeout(() => {
                                this.props.history.push('/addresslist');
                            }, 1000)
                        }
                        else
                            Toast.fail("姓名/电话/地址不能为空!", 1, null, false);
                    }} >保存</div>
                </div>
            </div>
        )
    }
}

export default connect(
    (state) => {
        return {
            
        }
    },
    (dispatch) => {
        return {
            edit_address: (item) => {
                dispatch( edit_address_action(item) )
            },
            delete_address: (id) => {
                dispatch( delete_address_action(id) );
            }
        }
    }
)( Edit )
